<template>
    <div class="container">
        <div class="main clearfix">
            <div class="content leftfix">
                <div class="row clearfix">
                    <div class="column-b" v-for="list in courseGroups" :key="list.id">
                        <img class="column-b" :src="list.cover">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { disUserInfo } from '@/api/discovery';
import { onMounted, ref } from 'vue'

const courseGroups = ref([]);
const pageSize = ref(16);

onMounted(async () => {
    try {
        let res = await disUserInfo(pageSize.value)
        courseGroups.value = res.content
        console.log(courseGroups);
    } catch (error) {
        ElMessage.error(error)
    }
})
</script>

<style scoped lang="less">
* {
    margin: 0;
    padding: 0;
}


.clearfix {
    content: "";
    display: block;
    clear: both;
}

.container {
    margin-left: auto;
    margin-right: auto;
    width: 1200px;
    text-align: center;
}

.content {
    width: auto;
}

.row {
    margin-top: 10px;
}

.column-b {
    float: left;
    margin-right: 10px;
    width: 286px;
    height: 156px;
    margin-bottom: 10px;
}
</style>
